<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加配送员列表' : '修改配送员列表'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" show-word-limit :maxlength="20" placeholder="请输入姓名" clearable />
      </el-form-item>
      <!-- <el-form-item label="头像" prop="avatar">
        <ImageUpload :value="form.avatar" :limit="1" :isShowTip="false"></ImageUpload>
      </el-form-item> -->
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入电话" clearable />
      </el-form-item>
      <el-form-item label="登录密码" prop="clearPassword">
        <el-input v-model="form.clearPassword" placeholder="请输入登录密码" clearable />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-select v-model="form.city" placeholder="请选择所在城市" clearable @change="changeCity">
          <el-option v-for="item in cityList" :key="item.id" :label="item.mergename" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域" prop="regionId">
        <el-select v-model="form.regionId" placeholder="请选择所在区域" clearable :disabled="regionListDisabled">
          <el-option v-for="item in regionList" :key="item.id" :label="item.details" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="装备" prop="area">
        <el-input v-model="form.area" placeholder="请输入区域" clearable/>
      </el-form-item> -->
      <el-form-item label="职能" prop="role">
        <el-input v-model="form.role" placeholder="请输入职能" clearable />
      </el-form-item>
      <el-form-item label="所属站点" prop="site">
        <el-input v-model="form.site" placeholder="请输入所属站点" clearable />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { findInRegionList } from "@/api/basic/area/area";
import { findRegionByAreaId } from "@/api/basic/region/region";
import { getDeliverMember,addDeliverMember,updateDeliverMember } from "@/api/deliver/deliverMember";
export default {
  data() {
    return {
      visible: false,
      form: {
        name: '',
        avatar: '',
        mobile: '',
        clearPassword: '',
        gender: '',
        city: '',
        regionId: '',
        role: '',
        site: '',
      },
      confirmLoading: false,
      queryParams: {},
      uploadUrl: "",
      regionListDisabled: true, //区域是否禁选
      cityList: [],//城市列表
      regionList: [], //区域列表
    }
  },

  computed: {
    dataRule() {
      return {
        name: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入电话', trigger: 'change' }
        ],
        clearPassword: [
          { required: true, message: '请输入登录密码', trigger: 'change' }
        ],
        // gender: [
        //   { required: true, message: '请输入姓名', trigger: 'change' }
        // ],
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        regionId: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        // role: [
        //   { required: true, message: '请输入姓名', trigger: 'change' }
        // ],
        // site: [
        //   { required: true, message: '请输入姓名', trigger: 'change' }
        // ],
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        findInRegionList().then(response => {
          this.cityList = response.data
        })
        this.regionListDisabled =true
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        name: '',
        avatar: '',
        mobile: '',
        clearPassword: '',
        gender: '',
        city: '',
        regionId: '',
        role: '',
        site: '',
      };
    },
    // 选择城市，城市改变后执行
    changeCity(value) {
      if (this.form.city) {
        //切换的时候城市清空，防止bug
        this.form.regionId = ''
        this.regionList = [];
        this.regionListDisabled = false;
        this.getFindRegionByAreaId(this.form.city)
      } else {
        this.regionList = [];
        this.regionListDisabled = true;
      }
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getDeliverMember(id).then(response => {
        response.data.city =response.data.city ? Number(response.data.city) : ''
        this.getFindRegionByAreaId(response.data.city)
        this.form = response.data;
        this.regionListDisabled = false
      });
    },
    // 获取区域列表
    getFindRegionByAreaId(id) {
      id ? findRegionByAreaId(id).then(response => {
        this.regionList = response.data
      }) : '';
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id != '') {
            this.form.maintainflag = false
            updateDeliverMember(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          } else {
            addDeliverMember(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          }
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
</style>
